<template>
  <div class="BaseInfo">
    <!-- <div class="back-btn" @click="goBack">
      <span type="text"><i class="el-icon-back"></i>{{ backText }}</span>
    </div> -->
    <Descriptions
      class="info-table"
      border
      :column="2"
      title="基本信息"
      :info-list="list"
    >
      <slot slot="title" name="title">
        <div class="flex-center">
          <div class="title">基本信息</div>
          <div class="status">{{ statusMap[flowStatue] }}</div>
        </div>
      </slot>
    </Descriptions>
  </div>
</template>
<script>
import Descriptions from '@/component/Descriptions.vue'

import { getEventCheckInfo as getBaseDetail } from '@/api/check.js'
export default {
  name: 'BaseInfo',
  props: {
    backText: {
      default: '返回列表'
    }
  },
  components: {
    Descriptions
  },
  data() {
    return {
      list: [],
      statusMap: {
        1: '待初审',
        2: '',
        3: '退回申请',
        4: '协调中',
        5: '待审核',
        6: '',
        7: '已关闭',
        8: '待发布',
        9: '已发布',
        10: '已停用'
      },
      flowStatue: ''
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      getBaseDetail({ id: this.$route.query.id }).then(({ success, data }) => {
        if (success) {
          this.$emit('getBaseInfo', data)
          let fileList = []
          if (data.policyFile) {
            fileList = data.policyFile.map((item) => {
              item.url = item.fileUrl
              item.name = item.fileName
              return item
            })
          }
          this.flowStatue = data.flowStatue
          this.list = [
            { label: '事项编号', value: data.serialNumber, method: () => {} },
            { label: '事项名称', value: data.itemName, method: () => {} },
            // { label: "发现方式", value: data.fromName, method: () => { } },
            {
              label: '事项描述',
              span: 2,
              wrap: true,
              value: data.descriptions,
              method: () => {}
            },
            {
              label: '多跨场景',
              wrap: true,
              value: data.itemSceneName
            },
            { label: '事项分类', value: data.categoryName, method: () => {} },
            {
              label: '所属层级',
              value: data.belongStratumName,
              method: () => {}
            },
            // { label: "申请部门", value: data.fromUnitName, method: () => { } },
            { label: '事件等级', value: data.levelName, method: () => {} },
            {
              label: '建议部门',
              value: data.adviceDisposeDept,
              method: () => {}
            },
            {
              label: '处置时限',
              value: data.toName ? data.toName + data.toUnitLabel : '',
              method: () => {}
            },
            { label: '所属地区', value: data.areaName, method: () => {} },
            { label: '申请部门', value: data.fromUnitName, method: () => {} },
            {
              label: '政策依据',
              wrap: true,
              span: 2,
              value: data.pursuantShortName,
              itemFileDTOList: fileList,
              method: () => {}
            },
            {
              label: '流程描述',
              wrap: true,
              span: 2,
              value: data.pursuantFullName,
              method: () => {}
            }
          ]
        }
      })
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>
<style lang="scss" scoped>
.soltTitle {
  display: flex;
  justify-content: center;
}
.status {
  border-radius: 2px;
  color: #fff;
  padding: 0 12px;
  font-size: 12px;
  margin-left: 10px;
  height: 24px;
  line-height: 24px;
  background-color: #1f84f9;
}
</style>
<style lang="scss">
.BaseInfo {
  .back-btn {
    transform: translateY(-4px);
    display: inline-block;
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
    margin-bottom: 8px;
    &:hover {
      color: $--color-primary;
    }
  }
  .el-icon-back {
    font-weight: bold;
  }
  // 表格宽度
  // .el-descriptions-item__label.is-bordered-label {
  //   width: 17%;
  //   text-align: right;
  // }
  // .el-descriptions-item__content {
  //   width: 33%;
  // }
}
</style>
